<template>
	<div class='article-page'>
		<div v-if="!error.status">
			<div class="article-panel">
				<div class='article-title'>{{article.title}}</div>
				<div class='article-info'>
					<div class='create-date'><i class='el-icon-date'></i>&nbsp;&nbsp;created in {{article.createTime.substring(0, 10)}}</div>
					<div class='tag-option'>
						<i class="icon-ios-leaf"></i>
						<so-tag class='tag-btns' type="text" v-for='(tag, index) in article.tags ? article.tags.split(",") : []' :key='index' :name="tag"></so-tag>
					</div>
				</div>
				<article-viewer class='article-box' :content='article.content'></article-viewer>
			</div>
			<div class="divider-box">
				<el-divider content-position="center"><i class="icon-ios-bulb"></i>想了解更多，请看下方</el-divider>
			</div>
			<div class="recommends-box">
				<recommend-panel :recommends="recommends"></recommend-panel>
			</div>
		</div>
		<blank-page v-if="error.status" :info="error.info" style="height: 600px"></blank-page>
	</div>
</template>

<script>
import {getArticle, getRelatedArticle} from '../../../../service/postService';
import ArticleViewer from '../../../../components/layout/ArticleViewer';
import SoTag from '../../../../components/base/SoTag';
import RecommendPanel from './components/RecommendPanel';
import BlankPage from '../../../../components/layout/BlankPage';

export default {
	name: 'ArticlePage',
	components: {
		RecommendPanel,
		ArticleViewer,
		BlankPage,
		SoTag
	},
	data () {
		return {
			article: {},
			content: '',
			recommends: [],
			error: {
				status: false,
				info: ''
			}
		};
	},
	mounted () {
		let self = this;
		let params = {
			id: this.$route.params.id.split('=')[1]
		};
		getArticle(params).then(data => {
			if (data.status === 200) {
				self.article = data.result;
				let relatedParams = {
					tags: self.article.tags,
					size: 6
				};
				getRelatedArticle(relatedParams).then(data => {
					self.recommends = data.resultList;
				});
			} else {
				self.error = {
					status: true,
					info: '服务器内部似乎出问题了 ' + data.message
				};
			}
		}).catch(e => {
			self.error = {
				status: true,
				info: '页面似乎出错了 ' + e.message
			};
		});
	}
};
</script>

<style lang="scss" scoped>
	.article-page {
		text-align: center;
		overflow: auto;
		width: 100%;
		max-width: 1000px;
		min-height: 100%;
		height: auto;
		margin: 20px auto 0;

		.article-panel {
			width: 100%;
			float: left;
			background: #fff;
			padding: 20px;
			margin: 0 auto;
			border-radius: 10px;

			.article-title {
				display: inline-block;
				width: 100%;
				line-height: 44px;
				text-align: center;
				font-size: 34px;
				margin-bottom: 10px;
			}

			.article-info {
				font-family: contentfont;
				display: inline-block;
				width: 100%;
				line-height: 20px;
				font-size: 14px;
				color: #5c6b72;
				text-align: center;
				margin: 10px 0;

				.create-date {
					padding-left: 0;
					font-family: numfont;
				}

				.tag-option {
					width: 100%;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					white-space: nowrap;
					i {
						color: #7aa7d1;
						margin-right: 10px;
					}
				}
			}

			.article-box {
				width: 100%;
			}
		}

		.divider-box {
			width: 100%;
			float: left;

			.el-divider__text.is-center {
				display: flex;
				align-items: center;
			}
			i {
				font-size: 28px;
				color: #7aa7d1;
			}
		}

		.recommends-box {
			width: 100%;
			float: left;
			padding-top: 20px;
		}
	}
</style>
